<template>
	<div class="logreg-wrap">
		<div class="login-wrap" v-show="showlogin">
			<h2 class="login-h2">登录</h2>
			<p class="login-tips tc" v-show="logtips">{{ tipstext }}</p>
			<input class="login-inp" type="text" placeholder="请输入用户名" v-model="loginuser">
			<input class="login-inp mt1" type="password" placeholder="请输入密码" v-model="loginpwd">
			<button class="login-btn mt1" v-on:click="login">登录</button>
			<p class="login-forgetwrap tr mt1" v-on:click="toregister">没有账号？马上注册</p>
		</div>
		<div class="login-wrap" v-show="showregister">
			<h2 class="login-h2">注册</h2>
			<p class="login-tips tc" v-show="regtips">{{ regtipstext }}</p>
			<input class="login-inp" type="text" placeholder="请输入用户名" v-model="reguser">
			<input class="login-inp mt1" type="password" placeholder="请输入密码" v-model="regpwd">
			<input class="login-inp mt1" type="password" placeholder="请输入确认密码" v-model="regagainpwd">
			<button class="reg-btn mt1" v-on:click="register">注册</button>
			<p class="login-forgetwrap tr mt1" v-on:click="tologin">我有账号，去登录</p>
		</div>
	</div>
</template>

<script>
import axios from 'axios';

export default{
	data(){
		this.register()
		return{
			showlogin: true,
            logtips:false,
            tipstext:'',
            loginuser:'',
            loginpwd:'',
            showregister: false,
            regtips:false,
            regtipstext:'',
            reguser:'',
            regpwd:'',
            regagainpwd:'',
		}
	},
	methods:{
		login(){
			if( this.loginuser == '' || this.loginuser == null ){
				this.logtips = true
				this.tipstext = "请输入用户名！"
				return
			}
			else if( this.loginpwd == '' || this.loginpwd == null ){
				this.logtips = true
				this.tipstext = "请输入密码！"
				return
			}
			else if( this.loginpwd.length < 6 ){
				this.logtips = true
				this.tipstext = "密码长度不能少于6个字符！"
				return
			}
			else{
				this.logtips = false
				let data = {'username':this.loginuser,'password':this.loginpwd}
	            /*接口请求*/
				axios.post('https://easy-mock.com/mock/5a50abeecce1483e3f2ec572/example/login', data)
				.then((res)=>{
					console.log(res)
	            	if(res.data.status == 0){
	            		this.logtips = true
						this.tipstext = "该用户不存在！"
	            	}
	            	else if ( res.data.status == 1 ){
	            		this.logtips = true
						this.tipstext = "密码错误！"
	            	}
	            	else if ( res.data.status == 2 ){
	            		this.$router.push('/main')
	            	}
	            	else{
	            		this.logtips = true
	            		this.tipstext = "登录成功！"
	            		setTimeout(function(){
	                    	this.$router.push('/home')
	                	}.bind(this),1000)
	            	}
				})
				.catch(function (res) {
			    	console.log(res);
				});
	           
	            /*this.$http.post('https://easy-mock.com/mock/5a50abeecce1483e3f2ec572/example/login',data).then((res)=>{
	            	console.log(res)
	            	if(res.data.status == 0){
	            		this.logtips = true
						this.tipstext = "该用户不存在！"
	            	}
	            	else if ( res.data.status == 1 ){
	            		this.logtips = true
						this.tipstext = "密码错误！"
	            	}
	            	else if ( res.data.status == 3 ){
	            		this.$router.push('/main')
	            	}
	            	else{
	            		this.logtips = true
	            		this.tipstext = "登录成功！"
	            		setTimeout(function(){
	                    	this.$router.push('/home')
	                	}.bind(this),1000)
	            	}
	            })*/
			}
		},
		toregister(){
			this.showlogin = false
			this.showregister = true
		},
		tologin(){
			this.showlogin = true
			this.showregister = false
		},
		register(){
			if( this.reguser == '' || this.reguser == null ){
				this.regtips = true
				this.regtipstext = "请输入用户名！"
				return
			}
			else if( this.regpwd == '' || this.regpwd == null ){
				this.regtips = true
				this.regtipstext = "请输入密码！"
				return
			}
			else if( this.regpwd.length < 6 ){
				this.regtips = true
				this.regtipstext = "密码长度不能少于6个字符！"
				return
			}
			else if( this.regagainpwd.length < 6 ){
				this.regtips = true
				this.regtipstext = "确认密码长度不能少于6个字符！"
				return
			}
			else if( this.regagainpwd != this.regpwd ){
				this.regtips = true
				this.regtipstext = "两个密码不一致，重新输入！"
				return
			}
			else{
				this.regtips = false
				let data = {'username':this.reguser,'password':this.regpwd}
	            /*接口请求*/
				axios.post('https://easy-mock.com/mock/5a50abeecce1483e3f2ec572/example/register', data)
				.then((res)=>{
					console.log(res)
	            	if(res.data.status == 0){
	            		this.regtips = true
						this.regtipstext = "该用户已注册！"
	            	}
	            	else if ( res.data.status == 1 ){
	            		this.regtips = true
						this.regtipstext = "注册失败，稍后重试！"
	            	}
	            	else{
	            		this.regtips = true
	            		this.regtipstext = "注册成功！"
	            		setTimeout(function(){
	                    	this.showlogin = true
							this.showregister = false
	                	}.bind(this),1000)
	            		this.loginuser = this.reguser
	            		this.loginpwd = this.regpwd
	            	}
				})
				.catch(function (res) {
			    	console.log(res);
				});
			}
		}
		
	}
}
</script>

<style scoped>
	.login-wrap{width: 80%; margin: 0 auto;}
	.login-h2{font-size: 1.6rem; font-weight: bold; margin: 1rem 0;}
	.login-tips{width:100%; display: block; height: 1.8rem; line-height: 1.8rem; color: #fff; background-color: #e73939; position: fixed; top:0; left:0}
	.login-inp{width:90%; height: 2.4rem; border:1px solid #ccc; padding: 0 5%;}
	.login-btn{width:100%; height: 2.4rem; background-color: #55ae4e; color: #fff; font-size: .95rem;}
	.reg-btn{width:100%; height: 2.4rem; background-color: #f95e28; color: #fff; font-size: .95rem;}
</style>